<template>
  <div v-loading="loading">
    <el-form ref="queryForm" :model="queryParams" :inline="true" @submit.native.prevent>
      <el-form-item :label="$t('部门名称')" prop="deptName">
        <el-input
          v-model="queryParams.deptName"
          :placeholder="$t('部门名称')"
          clearable
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t('搜索') }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('重置') }}</el-button>
      </el-form-item>
      <el-table ref="tableList" v-loading="loading" :row-class-name="tableRowClassName" :highlight-current-row="!multiple" :data="dataList" border tooltip-effect="darkTable" @row-click="rowClick" @select="selectHandle" @current-change="onCurrentChange">
        <template v-if="multiple">
          <el-table-column type="selection" />
        </template>
        <template v-if="!multiple">
          <el-table-column width="35" align="center">
            <template slot-scope="scope">
              <el-radio v-model="checked" :label="scope.row.deptId" />
            </template>
          </el-table-column>
        </template>
        <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="50">
          <template slot-scope="scope">
            {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('部门名称')" align="center" prop="deptName" />
        <el-table-column :label="$t('上级部门')" align="center" prop="parentDeptName" />
        <el-table-column :label="$t('部门领导')" align="center" prop="leaderName" />
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList([])"
      />
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存 取消按钮-->
      <el-button @click="cancel">{{ $t("取消") }}</el-button>
      <el-button type="primary" @click="submitForm">{{ $t("选择") }}</el-button>
    </div>
  </div>
</template>

<script>
import props from './mixin'
import { findListDept } from '@/api/system/dept'

export default {
  props: {
    ...props,
    multiple: {
      type: Boolean,
      default: false
    },
    role: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 用户表格数据
      dataList: [],
      selectList: [],
      state: false,
      checked: '',
      queryParams: {
        id: undefined,
        dpetId: undefined,
        deptName: undefined,
        pageSize: 10,
        pageNum: 1
      },
      isRedio: false
    }
  },
  methods: {
    getList(selectDeptList = []) {
      // this.init()
      this.loading = true
      if (selectDeptList.length === 0) {
        findListDept(this.queryParams).then(res => {
          console.log('已选列表', this.selectList)
          this.$nextTick(() => {
            this.selectList.forEach(selectDept => {
              res.rows.forEach(sysDept => {
                if (selectDept.id === sysDept.id && selectDept.checked) {
                  this.$nextTick(() => {
                    if (this.multiple) {
                      sysDept.checked = true
                      this.$refs.tableList.toggleRowSelection(sysDept, true)
                    } else {
                      this.checked = sysDept.id
                      this.$refs.tableList.setCurrentRow(sysDept)
                    }
                  })
                } else if (selectDept.id === sysDept.id && !selectDept.checked) {
                  this.$nextTick(() => {
                    this.$refs.tableList.toggleRowSelection(sysDept, false)
                  })
                }
              })
            })
          })
          this.dataList = res.rows
          this.total = res.total
          this.loading = false
        })
      } else {
        this.dataList = selectDeptList
        this.selectList = selectDeptList
        if (!this.multiple) {
          this.checked = selectDeptList[0].id
          this.$refs.tableList.setCurrentRow(selectDeptList[0])
          this.loading = false
        } else {
          selectDeptList.forEach(item => {
            this.$nextTick(() => {
              this.$refs.tableList.toggleRowSelection(item, true)
            })
          })
          this.loading = false
        }
      }
    },
    tableRowClassName(row) {
      if (row.row.checked) {
        return 'height-light'
      } else {
        return ''
      }
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.state = false
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      console.log(this.selectList)
      this.resetForm('queryForm')
      this.queryHandle()
    },
    selectHandle(selection, row) {
      const selected = selection.length && selection.indexOf(row) !== -1
      if (!selected || selected === 0) {
        this.selectList.forEach(item => {
          if (item.id === row.id) {
            item.checked = false
          }
        })
      } else {
        row.checked = true
        var addFlag = true
        this.selectList.forEach(item => {
          if (item.id === row.id) {
            addFlag = false
          }
        })
        if (addFlag) {
          this.selectList.push(row)
        }
      }
    },
    onCurrentChange(row) {
      if (!this.multiple && row.id) {
        this.checked = row.id
      }
    },
    submitForm() {
      if (!this.multiple) {
        this.$emit('change', this.checked)
        this.cancel()
      } else {
        this.$emit('change', this.selectList)
        this.cancel()
      }
    },
    rowClick(row) {
      if (this.multiple) {
        if (!row.checked) {
          this.$refs.tableList.toggleRowSelection(row, true)
          row.checked = true
          var addFlag = true
          this.selectList.forEach(item => {
            if (item.id === row.id) {
              item = row
              addFlag = false
            }
          })
          if (addFlag) {
            this.selectList.push(row)
          }
        } else {
          this.$refs.tableList.toggleRowSelection(row, false)
          row.checked = false
          this.selectList.forEach(item => {
            if (item.id === row.id) {
              item.checked = false
            }
          })
        }
      }
    },
    cancel() {
      this.reset()
      this.$parent.$parent.tableOpen = false
    },
    reset() {
      this.dataList = []
      this.checked = ''
      this.selectList = []
      this.total = 0
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-table__header-wrapper .el-checkbox{
  display: none;
}
/deep/ .dialogForm .el-dialog__body {

}
/deep/ .el-table .height-light {
  background: #e8f4ff;
}
</style>
